import { CommonComponentProps } from '../../interface'
import { useMaterialDrop } from '../../hooks/useMaterialDrop'
import { useComponentConfigStore } from '../../stores/component-config'

const Page = ({ id, children, styles }: CommonComponentProps) => {

  const { componentConfig } = useComponentConfigStore()

  const materials = Reflect.ownKeys(componentConfig).filter(key => key !== 'Page')

  const { canDrop, drop } = useMaterialDrop(materials as string[], id)

  return (
    <div data-component-id={id} ref={drop as any} className='p-[20px] h-[100%] box-border'
      style={{ ...styles, border: canDrop ? '2px solid blue' : 'none' }}>
      {children}
    </div>
  )
}

export default Page